    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放大镜案例</title>
        <style>
            *{
                margin: 0;
                padding:0 ;
            }
            #box{
                position: relative;
            }
            #box #small{
                border: 1px solid #000;
                width: 350px;
                height: 350px;
                top: 100px;
                left: 100px;
                position: relative;
            }
            #big{
                position: absolute;
                width: 400px;
                height: 400px;
                left: 650px;
                top: 100px;
                border: 1px solid #000;
                overflow: hidden;
            }
            #mask{
                position: absolute;
                width: 175px;
                height: 175px;
                background: #3bfff6;
                opacity: 0.5;
                left: 0;
                top:0;
                cursor: crosshair;
            }
            #big img{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <script src="publicfunction.js"></script>
    </head>
    <body>
    <div id="box">
        <div id="small">
            <div id="mask"></div>
            <img src="imgs/001.jpg" alt="">
        </div>
        <div id="big">
            <img src="imgs/0001.jpg" alt="">
        </div>
    </div>
    <script>
        var box=document.getElementById("box");
        var small=document.getElementById('small');
        var mask=small.children[0];
        var smallImg=small.children[1];
       var big=document.getElementById('big');
       var bigImg=big.children[0];
       // console.log(bigImg);
       small.onmousemove=function (event) {
            event=event||window.event;
            var pageY=event.pageY||scroll().top+event.clientY;
            var pageX=event.pageX||scroll().left+event.clientX;
             var xx=small.offsetLeft;
             var yy=small.offsetTop;
           //  console.log(pageY);
           // console.log(pageX);
           // console.log("xx"+xx);
           // console.log("yy"+yy);
           var x=pageX-xx-mask.offsetWidth/2;
           var y=pageY-yy-mask.offsetHeight/2;
           //把mask小的遮罩层困在小盒子small中 开始
           if(x>(small.offsetWidth-mask.offsetWidth)){
               x=small.offsetWidth-mask.offsetWidth;
           }
           if(x<0){
               x=0;
           }
           if(y<0){
               y=0;
           }
           if(y>(small.offsetHeight-mask.offsetHeight)){
               y=small.offsetHeight-mask.offsetHeight;
           }
            mask.style.left=x+"px";
            mask.style.top=y+"px";

//把mask小的遮罩层困在小盒子small中 结束
// 移动大图片开始
// 将进行等比例移动移动公式为 （大的图片-大盒子big）/（小盒子-mask）=大照片移动的距离/mask移动距离
// mask移动的距离是x y 所以只要求出比例系数aaa就可以赋值了
// 在这其中要对img进行定位，别忘了。不然不会动
//  还有在small盒子上不要添加margin 要进行left与top定位效果会更好
       var aaa=(bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
       var bigX=aaa*x;
       var bigY=aaa*y;
           console.log(aaa);
       bigImg.style.left=-bigX+"px";
       bigImg.style.top=-bigY+"px";
//移动大图片结束
       }
    </script>
    </body>
    </html>